<!--
 * @Author: chenxunan
 * @Date: 2019-11-22 
 * @LastEditors: 
 * @LastEditTime:
 * @Description: 目前这版只能数据渲染，接下来的更新需要把column拆分，处理复杂的列表结构
 -->

<template>
  <div :class="['grimm-table', {'grimm-table-border': border}]">
    <table>
      <colgroup>
        <col 
          v-for="(item, index) in tableColumn" 
          :key="index"
          :width="item.width"
        >
      </colgroup>
      <thead>
        <tr>
          <th 
            v-for="(item, index) in tableColumn" 
            :key="index"
            :style="{'text-align': `${item.align || 'left'}`}"
          > 
            {{item.title}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(trItem, index) in tableData" :key="index">
          <td 
            v-for="(tdItem, i) in tableColumn" 
            :key="i"
            :style="{'text-align': `${tdItem.align || 'left'}`}"
          >
            <div class="td-content">
              <div v-if="tdItem.cell">
                <artice-content :html="tdItem.cell(trItem, tdItem, index)"/>
              </div>
              <div v-else>
                {{trItem[tdItem.dataIndex]}}
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import Vue from 'vue/dist/vue.esm.js'
const COMPONENT_NAME = 'grimm-table'

export default {
  name: COMPONENT_NAME,
  components: {
    'artice-content': {
      props: {
        html: String
      },
      render (h) {
        const com = Vue.extend({
          template: `<div>${this.html}</div>`
        })
        return h(com, {})
      }
    }
  },
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    tableColumn: {
      type: Array,
      default: [],
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  methods: {
  }
};
</script>
<style lang="stylus"  scoped>

</style>
